﻿<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt" %>
<html>
		<title>书籍详情页</title>
		<style type="text/css">
			.main{
				/*设置外边距，下面有30px距离*/
				margin:0px 0px 30px 0px;
				/*背景色*/
				background-color:#ffffff;
				/*字体大小*/
				font-size:12px;
				/*文字颜色*/
				color:#000000;
				/*文本对齐方式*/
				text-align:center;
				/*垂直对齐方式*/
				vertical-align:top;
				/*设置行高*/
				line-height:150%;	
				font-family: Arial, Helvetica, sans-serif;				
			}

			/*设置a标签 字体12px 颜色 #0066FF*/
			a {
				font-size: 12px;
				color: #0066FF; /*#1E33F7*/
			}
			/*设置未访问的超连接无下划线*/
			a:link {
				text-decoration: none;
			}
			/*设置访问后的连接颜色为#0066ff 也无下划线*/
			a:visited {
				text-decoration: none;
				color: #0066FF;
			}
			/*设置鼠标移到超连接上无下划线颜色为#990099*/
			a:hover {
				text-decoration: none;
				color: #990099; /*颜色变换*/
			}
			/*设置选定的超连接无下划线，颜色为#0066ff*/
			a:active {
				text-decoration: none;
				color: #0066FF;
			}
			/*设置所有td标签*/
			td{
				text-align:left;
				vertical-align:top;
				font-size:12px;
			}

			/*设置所有的hr标签*/
			hr{
				/*颜色*/
				color:#cccccc;
				/*高度*/
				height:1px;
				/*上外边距5px*/
				margin-top:5px;
				/*下外边距5px*/
				margin-bottom:5px;
				/*分隔线如果超出框架部分隐藏*/
				overflow:hidden;
			}
			/*设置h1*/
			h1{
				font-size:14px;
				color:#000000;				
				margin-bottom:5px;
				font-weight:bold;
				display:inline;		
				text-align:left;				
			}
			
			#head{
				/*设置head这个div宽度为100%*/
				width:100%;
			}
			.headtab{
				width:100%;
			}
			.headta td{
				/*设置td内边距上10px 右50px 下25px 左135px*/
				padding:10px 50px 25px 135px;
			}
			.inputtxt{
				width:130px;
				height:18px;
				border:1px solid #999999;
			}
			/*注册页面content部分整体设计*/
			#content{
				width:900px;
				height: 80%;
				background-color:#fcfdef;
				border:1px solid #eeeddb;
				margin-right:auto;
				margin-left:auto;
			}
			#left{
				width: 30%;
				height: 100%;
				float: left;
			}
			#right{
				width: 65%;
				height: 100%;
				float: left;
			}
			/*设置边框*/			
			.upline{
				border-bottom-width:1px;
				border-bottom-style:dashed;
				border-bottom-color:#b0bec7;
				padding-top:5px;
				padding-bottom:5px;
				margin:20px;
			}
			/*设置文本框样式*/
			.txtinput{
				margin-left:10px;
				font-size:12px;
				width:150px;
				height:18px;
				border:1px solid #a4b4bd;
			}
			/*设置文本域样式*/
			.txtarea{
				margin-left:10px;
				font-size:12px;
				width:350px;
				height:75px;
				border:1px solid #a4b4bd;
			}
			#foot{
				width:100%;
				background-color:#efeedc;
				margin-top:15px;
			}			
		</style>
	</head>
	<body class="main">
		<!--
			head是由一行两列table完成展示 
		-->
		<div id="head">
		<table class="headtab">
			<tr>
				<td align="left">
					<img src="/images/logo.png">
				</td>
				<td style="text-align:right">					
					<img src="/images/cart.gif">
					<a href="/goodscard/queryGoods.do">购物车</a>|
					<a>帮助中心</a>|
					<a>我的帐户</a>|
					<a href="/view/register.html">新用户注册</a>|
				</td>
			</tr>
		</table>
		</div>

<div id="content">			
	<div id="left">
		<img src="${book.bookUrl}" width="100%" height="70%"> </img>
	</div>
	<div id="right">
			<table width="100%" border="0" cellspacing="2" class="upline">
				<tr style="height: 40px">
					<td style="text-align:right;width:20%">书籍名称</td>
					<td><input type="text" value="${book.bookName}"></td>
				</tr>

				<tr style="height: 40px">
					<td style="text-align:right;">作者</td>
					<td><input type="text" value="${book.author}"></td>
				</tr>
				<tr style="height: 40px">
					<td style="text-align:right;">出版社</td>
					<td><input type="text" value="${book.publisher}" ></td>
				</tr>
				<tr style="height: 40px">
					<td  style="text-align:right;">售价</td>
					<td><input type="text" value="${book.price}"></td>
				</tr>

                <tr style="height: 40px">
                    <td  style="text-align:right;">出版日期:</td>
                    <td> <input type="text" value="<fmt:formatDate value="${book.publisherTime}" pattern="yyyy-MM-dd"></fmt:formatDate>" />
                    </td>
                </tr>
				<tr style="height: 40px">
					<td  style="text-align:right;">库存:</td>
					<td> <input type="text" value="${book.stock}" ></td>
				</tr>
				<tr style="height: 40px">
					<td  style="text-align:right;" colspan="2"><a href="/goodscard/saveGoods.do?bookId=${book.id}">加入购物车</a></td>
				</tr>
			</table>
	</div>
</div>
		<!--
			foot是由两行两列的table完成。
			但是第一个td合并了2行
		-->
		<div id="foot">
			<table bgcolor="#efeedc" width="100%" align="center">
				<tr>
					<td rowspan="2" style="width:10%">
						<img src="/images/logo.png" width="195" height="50" style="margin-left:175px;">
					</td>
					<td style="padding-left:50px;padding-top:5px;">
						<a><font color="#747556">CONTACT US</font></a>
					</td>
				</tr>
				<tr>
					
					<td style="padding-left:50px;">
						<font color="#747556">copyright&nbsp;2024&copy;重庆应用职业技术学院</font>
					</td>
				</tr>
				
			</table>
		</div>			
	</body>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script>
$(function(){
	$("input[type=image]").click(function(){
		let $loginName=$("input[name=loginName]");
		if($loginName.val()==''||$loginName.val()==null){
			$loginName.parent().next().html("<font color='#ff0000'>登陆帐号不能为空!</font>");
			return false;
		}
		let $pwd=$("input[name=pwd]");
		if($pwd.val()==''||$pwd.val()==null){
			$pwd.parent().next().html("<font color='#ff0000'>登陆密码不能为空!</font>");
			return false;
		}
		$("#form").submit();
	})
	$("input[name=loginName]").click(function(){
		if($(this).val()==''||$(this).val()==null){
			$(this).parent().next().html("<font color='#ff0000'>登陆帐号不能为空!</font>");
		}else{
			$(this).parent().next().html("<font color='green'>登陆账号输入正确！</font>");
		}
	})
	$("input[name=pwd]").click(function(){
		if($(this).val()==''||$(this).val()==null){
			$(this).parent().next().html("<font color='#ff0000'>登录密码不能为空!</font>");
		}else{
			$(this).parent().next().html("<font color='green'>密码输入正确！</font>");
		}
	})
})
</script>
</html>